<template>
	<view class="container">
		<!-- 中间内容区域 -->
		<view class="content">
			<image src="/static/homework/love_china.png" class="love-china-img" mode="widthFix"></image>
			<text class="intro-text">我来自互联201，我叫李伶俐</text>
		</view>
		<!-- 底部选项卡 -->
		<view class="tab-bar">
			<view class="tab-item">
				<image src="/static/homework/message.svg" class="tab-img"></image>
				<text class="tab-text">强国通</text>
			</view>
			<view class="tab-item">
				<image src="/static/homework/bai.svg" class="tab-img"></image>
				<text class="tab-text">百灵</text>
			</view>
			<view class="tab-item">
				<image src="/static/homework/view.svg" class="tab-img"></image>
				<text class="tab-text">电视台</text>
			</view>
			<view class="tab-item">
				<image src="/static/homework/dian.svg" class="tab-img"></image>
				<text class="tab-text">电台</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods: {
			
		},
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh; /* 使容器占满整个屏幕 */
		justify-content: space-between; /* 让内容和选项卡分布到两端 */
	}

	.content {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
	}

	.love-china-img {
		width: 200rpx;
		margin-bottom: 30rpx;
	}

	.intro-text {
		font-size: 28rpx;
		color: #666;
	}

	.tab-bar {
		display: flex;
		justify-content: space-around;
		padding: 10rpx 0;
		border-top: 1rpx solid #eee;
	}

	.tab-img {
		width: 40rpx;
		height: 40rpx;
		
	}
	.tab-text {
			font-size: 20rpx;
			color: #666; 
			margin-bottom: 30rpx; 
		}
	
</style>
